<script setup lang="ts">
import { ref } from 'vue';
</script>

<template>
  <page class="page" custom-overflow="visible">
    <page-template footerBtnTitle="点击查看更多" :footerBtnIcon="true">
      <view class="opp-head">
        <view class="opp-head-left">
          <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image> 
          <view class="opp-head-left-title">Pura 70 Ultra</view>
          <view class="opp-head-discount">立减 600元</view>
          <view class="opp-head-btn">
            <hire-button>
              <price-box style="margin-right: 10px;" num="15.24" color="#FFFFFF"></price-box>
            </hire-button>
          </view>
        </view>
        <view class="opp-head-right">
          <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image> 
          <view class="opp-head-left-title">Pura 70 Ultra</view>
          <view class="opp-head-discount">立减 600元</view>
          <view class="opp-head-btn">
            <hire-button>
              <price-box  style="margin-right: 10rpx;" num="15.24" color="#FFFFFF"></price-box>
            </hire-button>
          </view>
        </view>
        <image class="vs" src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/opp-vs.png" mode="aspectFill"></image>
      </view>
      <view class="banner">
        <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image> 
        <view class="banner-content">
          <view class="banner-content-title">
            <mark-tips style="margin-right: 8rpx;" ></mark-tips>
            <text class="text">Pura 70 Ultra</text>
          </view>
          <view class="banner-content-main">
            <view class="banner-item" v-for="item in 3" :key="item">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image> 
              <view class="banner-item-title">2K E7 超色准屏</view>
            </view>
          </view>
          <view class="banner-content-bottom">
            <hire-button>
              <view class="price-left">
                <price-box num="15.24" color="#FFFFFF"></price-box>
              </view>
            </hire-button>
          </view>
        </view>
      </view>
      <view class="series">
        <view class="series-head">
          <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/opp-series.png" mode="aspectFill"></image> 
        </view>
        <view class="series-body-top">
          <view class="series-row-left">
            <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image> 
            <view class="series-row-left-bottom"> 
              <image style="margin-left: 30rpx; margin-top: -30rpx;" src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image> 
              <view class="series-content">
                <view class="title">Pura 70 Ultra</view>
                <view class="mark"><mark-tips style="margin-right: 10rpx;"></mark-tips> <discount-button></discount-button></view>
                <view class="bottom">
                  <hire-button>
                    <view class="price-left">
                      <price-box num="15.24" color="#FFF0C7"></price-box>
                    </view>
                  </hire-button>
                </view>
              </view>
            </view>
          </view>
          <view class="series-row-right series-item">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image> 
              <view class="series-content">
                <view class="title">Pura 70 Ultra</view>
                <view class="mark"><mark-tips style="margin-right: 10rpx;"></mark-tips> <discount-button></discount-button></view>
                <hire-button>
                  <view class="price-left">
                    <price-box num="15.24" color="#FFF0C7"></price-box>
                  </view>
                </hire-button>
              </view>
          </view>
        </view>
        <view class="series-body-bottom">
          <view class="series-item series-body-bottom-item" v-for="item in 2" :key="item">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image> 
              <view class="series-content">
                <view class="title">Pura 70 Ultra</view>
                <view class="mark"><mark-tips style="margin-right: 10rpx;"></mark-tips> <discount-button></discount-button></view>
                <hire-button>
                  <view class="price-left">
                    <price-box num="15.24" color="#FFF0C7"></price-box>
                  </view>
                </hire-button>
              </view>
          </view>
        </view>
      </view>
      <view class="more" v-for="moreitem in 2" :key="moreitem">
        <view class="more-head">
          <view class="more-head-title">oppo系列</view>
          <view class="more-head-desc">探索未见之美 打开全新视界</view>
        </view>
        <view class="more-body">
          <view class="more-body-item" v-for="item in 3" :key="item">
            <view class="img-box">
              <image src="https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/pura-70.png" mode="aspectFill"></image>
              <view class="img-box-discount">立减 600元</view>
            </view>
            <view class="title">Pura 70 Ultra</view>
            <view class="desc">Ultra72024款</view>
            <view class="price">
              <price-box style="margin-right: 10rpx;" num="15.24" color="#FF1717"></price-box>
              <hire-button></hire-button>
            </view>
          </view>
        </view>
      </view>
    </page-template>
  </page>
</template>
<style lang="scss" scoped>
.opp{
  &-head{
    margin-left: -20rpx;
    margin-right: -20rpx;
    padding: 282rpx 20rpx 0;
    height: 805rpx;
    position: relative;
    display: flex;
    background-image: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/opp-head.png');
    background-size: 100% 100%;
    &-left{
      padding: 20rpx 60rpx 20rpx 20rpx;
      width: 340rpx;
      height:426rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-image: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/opp-banner-left.png');
      background-size: 100% 100%;
      image{
        width: 220rpx;
        height: 214rpx;
      }
      &-title{
        margin-top: 15rpx;
        margin-bottom: 10rpx;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        font-size: 29rpx;
        color: #000000;
        line-height: 41rpx;
      }
    }
    &-right{
      margin-left: -30rpx;
      padding: 20rpx 40rpx;
      width: 400rpx;
      height:426rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-image: url('https://meizuly.oss-cn-shanghai.aliyuncs.com/xcxPic/h5/opp-banner-right.png');
      background-size: 100% 100%;
      image{
        width: 220rpx;
        height: 214rpx;
      }
    }
    .vs{
      position: absolute;
      left: 280rpx;
      top: 380rpx;
      width: 114rpx;
      height: 114rpx;
    }
    &-discount{
      margin-bottom: 15rpx;
      padding: 0 8rpx;
      height: 32rpx;
      line-height: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 20rpx;
      color:#FFFFFF;
      background: #FF1717;
      border-radius: 10rpx;
      border: 2rpx solid #FF1717;
    }
    &-btn{
      width: 200rpx;
    }
  }
}
.banner{
  z-index: 10;
  margin-top: -75rpx;
  padding: 20rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  display: flex;
  image{
    flex-shrink: 0;
    width: 152rpx;
    height: 242rpx;
  }
  &-content{
    margin-left: 25rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-title{
      display: flex;
      align-items: center;
      .text{
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        font-size: 34rpx;
        color: #000000;
        line-height: 47rpx;
      }
    }
    &-main{
      width: 100%;
      margin-top: 10rpx;
      padding: 18rpx 12rpx;
      display: flex;
      background: #F2F3F5;
      border-radius: 20rpx;
      .banner-item{
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &::after{
          content: '';
          display: block;
          position: absolute;
          top: 12rpx;
          bottom: 12rpx;
          right: 0;
          width: 1rpx;
          background: #eeeeee;
        }
        &:last-child{
          &::after{
            display: none;
          }
        }
        image{
          width: 64rpx;
          height: 42rpx;
          border-radius: 6rpx;
        }
        &-title{
          margin-top: 10rpx;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 20rpx;
          color: #333333;
          line-height: 28rpx;
        }
      }
    }
    &-bottom{
      margin-top: 20rpx;
    }
  }

}

.price-left{
  margin-right: 9rpx;
  padding-right: 8rpx;
  position: relative;
  &::after{
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 12rpx;
    bottom: 12rpx;
    width: 1rpx;
    background: #ffffff;
  }
}
.series{
  margin-top: 20rpx;
  padding:18rpx 12rpx;
  background: #1D2029;
  border-radius: 20rpx;
  &-head{
    padding: 20rpx 0;
    margin-bottom:10rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    image{
      width: 476rpx;
      height: 34rpx;
    }
  }
  &-body{
    &-top{
      display: flex;
    }
    &-bottom{
      margin-top: 10rpx;
      display: flex;
      &-item{
        width: calc(50% - 5rpx);
        &:first-child{
          margin-left: 0;
        }
      }
    }

  }
  &-row{
    &-left{
      flex-shrink: 0;
      width: 450rpx;
      height: 330rpx;
      padding: 6rpx 8rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      image{
        display: block;
        width: 100%;
        height: 166rpx;
        border-radius: 20rpx 20rpx 0 0;
      }
      &-bottom{
        display: flex;
        image{
          width: 142rpx;
          height: 171rpx;
          border-radius: 18rpx;
        }
      }
    }
    &-right{
      width: 224rpx;
      height:330rpx;
    }
  }
}
.series-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title{
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 29rpx;
    color: #000000;
    line-height: 41rpx;
  }
  .mark{
    margin-top: 6rpx;
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }
  .bottom{
     width: 212rpx;
  }
}
.series-item{
  margin-left: 10rpx;
  padding: 18rpx 8rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  image{
    width: 124rpx;
    height: 148rpx;
    border-radius: 18rpx;
  }
  .title{
    margin-top: 10rpx;
  }
  .mark{
    margin-bottom: 15rpx;
  }
}
.more{
  margin-top: 20rpx;
  padding: 20rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  &:last-child{
    margin-bottom: 20rpx;
  }
  &-head{
    padding: 10rpx;
    margin-bottom:10rpx;
    width: 100%;
    display: flex;
    align-items: center;
    &-title{
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      font-size: 45rpx;
      color: #171717;
      line-height: 63rpx;
    }
    &-desc{
      margin-left: 14rpx;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 24rpx;
      color: #171717;
      line-height: 33rpx;
    }
  }
  &-body{
    display: flex;
    &-item{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      image{
        width: 132rpx;
        height: 148rpx;
        border-radius: 18rpx;
      }
      
      .img-box{
        position: relative;
        &-discount{
          position: absolute;
          bottom: 0rpx;
          width: 132rpx; 
          height: 32rpx;
          background: #FF1717;
          border-radius: 10rpx;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 20rpx;
          color: #FFFFFF;
          line-height: 28rpx;
          text-align: center;
          z-index: 10000;
        }
      }
      .title{
        margin: 6rpx 0 4rpx;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        font-size: 29rpx;
        color: #000000;
        line-height: 41rpx;
        text-align: center;
      }
      .desc{
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 20rpx;
        color: #999999;
        line-height: 28rpx;
      }
      .price{
        display: flex;
        align-items: center;
      }
    }
  }
}

</style>

